<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>  
		</view>  
		<!-- #endif --> 	
		<uni-nav-bar fixed="true" left-icon="false" :status-bar="true" :border="false"   >
			<view class="flex NavBox">
				<view class="Navsearch flex" @click="Torelease()"><image src="../static/images/jia.png" mode=""></image></view>
				<view class="flex ListBox">
					<view class="NavList"  v-for="(item,index) in NavList" :key="index" @click="TabNav(index)">
						<text :class="num==index?'choice':''">{{item}}</text>
					</view>
				</view>
				<!-- <view class="Navsearch"></view> -->
			</view>
		
		</uni-nav-bar>
		
		<view class="" >
			<view class="InfoBox" v-for="(item,index) in InfoList" :key="index">
				<view class="flex">
					<view class="portrait">
						<image :src="item.note_member_avatar" mode=""></image>
					</view>
					<view class="UserInfo">
						<view class="Name">{{item.note_member_name}}</view>
						<view class="Item">{{item.add_time |formaDate}}</view>
					</view>
					<view style="width: 80rpx;">
						
					</view>
					<!-- <view class="follow" :class="item.had_liked?'bgeee':''" @click="follow(item.note_member_id,index,item.had_liked)">{{item.had_liked?'已关注':'+关注'}}</view> -->
				</view>
				<view class="Title">{{item.note_title}}</view>
				<view class="content">
					{{item.note_content}}
				</view>
				
				<view class="flex" style="justify-content: start;flex-wrap: wrap;" @click="Todetails(item.note_id)" >
					<view class="ImgBox "   v-for="(item2,index2) in item.note_image" :key="index2" >
						<image :src="item2.url" mode="widthFix" ></image>
					</view>
				</view>
				
				<view class="" style="width: 100%;overflow-x: scroll;overflow-y: hidden; display: -webkit-inline-box;">
						<view class="shopBox flex" v-for="(item2,index2) in item.note_goods" style="" :key="index2" @click="ToShop(item2.goods_id)">
							<view class="shopImg">
								<image :src="item2.goods_image_thumb" mode=""></image>
							</view>
							<view class="InfoBox2">
								<view class="shopName textHide">{{item2.goods_name}}</view>
								<view class="Price">￥{{item2.goods_price}}</view>
							</view>
						</view>
				</view>
				<view class="flex operationBox">
					<view class="">
						<!-- 3305阅读 -->
					</view>
					<view class="operation flex">
					<!-- 	<view class="">
							<image src="../../static/images/shareIco.png" mode=""></image>
						</view> -->
						<view class="">
							<image v-if="item.had_zan" src="../static/images/FabulousIco.png" mode="" @click="Fabulous(item.note_id,index,item.had_zan)"></image>
							<image v-else src="../static/images/dzIco.png" mode=""  @click="Fabulous(item.note_id,index,item.had_zan)"></image>
							<text>{{item.zan_count}}</text>
						</view>
						<view class=""  @click="Todetails(item.note_id)">
							<image src="../static/images/commentIco.png" mode=""></image>
							<text>{{item.comment_count}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		<tab-bar :num="3"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../TabBar/TabBar'
	export default {
		components:{TabBar},
		data() {
			return {
				NavList:["关注","热门","最新"],
				num:0,
				InfoList:[],
				curpage:1
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom(e) {
			if(this.curpage){
				this.getList(true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		methods: {
			ToShop(goods_id){
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+goods_id
				})
			},
			Fabulous(note_id,index,type){//点赞取消
				// alert(note_id,index,type)
					let cancel=""
					if(type){
						cancel=1
					}else{
						cancel=0
					}
					this.$util.request({
						url: "/hao/index.php?act=api-note&op=zan",
						method: 'get',
						data: {
							'note_id':note_id,
							'cancel':cancel
						}
					}).then(response => {
						if (response.error_code == 0) {
							this.InfoList[index].had_zan = !this.InfoList[index].had_zan
							if(this.InfoList[index].had_zan){
								this.InfoList[index].zan_count++
								uni.showToast({
									title: "点赞成功",
									icon: 'none'
								})
							}else{
								this.InfoList[index].zan_count--
							}
						
						} else {
							uni.showToast({
								title: response.message,
								icon: 'none'
							})
						}
					})
			},
			getList(state){//获取动态列表
				this.$util.request({
					url: '/hao/index.php?act=api-search&op=note_list',
					method: 'get',
					data: {curpage:this.curpage},
				}).then((res)=>{
					if (res.error_code == 0) {
						if(state){
							this.InfoList=this.InfoList.concat(res.datas.notes)  
						}else{
							this.InfoList=res.datas.notes
						}
						
						if(res.datas.hasmore){
							this.curpage++
						}else{
							this.curpage=false
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					}
				})
			},
			Torelease(){
				uni.navigateTo({
					url:"../dynamic/release"
				})
			},
			Todetails(note_id){
				uni.navigateTo({
					url:"/live/dynamic/details?note_id="+note_id
				})
			},
			
			TabNav(index){
				this.num=index
			}
		}
	}
</script>

<style>
	.status_bar {
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #FFFFFF;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #FFFFFF; 
	    top: 0;  
	    z-index: 999;  
	}
	.operation{
		width: 350rpx;
	}
	.operation image{
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.operationBox{
		margin-top: 20rpx;
	}
	.shopBox .shopName{
		line-height: 40rpx;
	}
	.shopBox .Price{
		line-height: 40rpx;
		color: #FE3B6B;
	}
	.shopImg{
		width: 100rpx;
		margin-right: 10rpx;
	}
	.shopImg image{
		width: 100rpx;
		height: 100rpx;
	}
	.textHide{
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 400rpx;
		overflow: hidden;
	}
	.shopBox{
		width: 500rpx;
		height: 100rpx;
		background-color: #F8F8F8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
		display: inline-block;
	}
	.InfoBox .ImgBox image{
		width: 208rpx;
		/* height: 210rpx; */
		border: 1rpx solid #EEEEEE;
	}
	.InfoBox .ImgBox{
		margin: 10rpx 0;
		width: 210rpx;
		height: 210rpx;
		overflow: hidden;
		margin-right: 12rpx;
	}
	.content{
		text-indent:2em;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #333333;
	}
	.Title{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin: 10rpx 0;
	}
	.InfoBox .follow{
		background-color: #ff3355;
		color: #FFFFFF;
		border-radius: 30rpx;
		width: 100rpx;
		/* padding: 0 20rpx; */
		text-align: center;
		margin-right: 20rpx;
	}
	.UserInfo .Name{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;
	}
	.UserInfo .Item{
		font-size: 24rpx;
	}
	.UserInfo{
		width: 450rpx;
	}
	.InfoBox{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.portrait{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.portrait image{
		width: 100rpx;
		height: 100rpx;
	}
	.ListBox{
		width:500rpx;
	}
	.NavList{
		font-size: 36rpx;
		color: #000000;
		width: 50%;
		text-align: center;
	}
	.NavList{
		font-size: 36rpx;
		color: #000000;
		width: 50%;
		text-align: center;
	}
	.NavBox{
		/* padding-top: 20rpx; */
		margin-left: -120rpx;
		font-weight: bold;
		background-color: #FFFFFF;
	}
	.bgeee{
		background-color: #EEEEEE;
	}
	.Navsearch{
		width: 50rpx;
		margin-left: 80rpx;
	}
	.Navsearch image{
		width: 50rpx;
		height: 50rpx;
		overflow: hidden;
	}
	.choice{
		border-bottom: 4rpx solid #E82C58;
	}
	
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrap{
		flex-wrap: wrap;
	}
</style>
